import React, { PureComponent } from 'react';
import Link from 'umi/link';
import { Icon } from 'components';
import styles from './index.less';

export interface MenuProps {
  selectedKey?: string;
  menuList: Array<{name: string, icon: string, path: string}>;
}

interface MenuState {
  currentKey: string | undefined,
}

class Menu extends PureComponent<MenuProps, MenuState> {
  constructor(props: MenuProps) {
    super(props);
    this.state = {
      currentKey: this.getDefaultCollapsedSubMenus(props),
    }
  }

  onSelect = (currentKey: string) => {
      this.setState({
        currentKey
      })
  };

  getDefaultCollapsedSubMenus(props: MenuProps) {
    const { pathname = '/' } = location;
    const { selectedKey } = props;
    return selectedKey || pathname.replace('/', '')
  }

  render () {
    const { currentKey } = this.state;
    const { menuList } = this.props;

    return (
      <div className={styles.wrapper}>
        <ul className={styles.menu}>
          {
            menuList.map(i => (
              <Link
                to={i.path}
                key={i.name}
              >
                <li
                  className={currentKey === i.path ? styles.active : ''}
                  onClick={() => this.onSelect(i.path)}
                >
                  <span className={styles.listItem}>
                    <Icon type={i.icon} />
                    <span>{i.name}</span>
                  </span>
                </li>
              </Link>
            ))
          }
        </ul>
        <div className={styles.history}>
          <h3>History</h3>
          <ul>
            {
              Array(10).fill(1).map((_, index) => (
                <li key={index}>
                  abcdefgdajkl/dsaj/test
                </li>
              ))
            }
          </ul>
        </div>
      </div>
    )
  }
}

export default Menu;
